<template>
  <el-dialog
    :title="addIds.type?'新增权限':'编辑权限'"
    :visible="value"
    width="35%"
    :before-close="handleClose"
    @open="initialized"
  >
    <el-form ref="FormData" label-width="120px" :model="permissionList" :rules="rules">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionList.name" size="mini" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionList.code" size="mini" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="permissionList.description" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item label="开启" prop="enVisible">
        <el-switch
          v-model="permissionList.enVisible"
          active-color="#13ce66"
          inactive-value="0"
          active-value="1"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center" align="center">
      <el-button size="mini" type="primary" @click="addYes">确 定</el-button>
      <el-button size="mini" @click="handleClose">取 消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionList, getPermission, updatePermission } from '@/api/permission'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    addIds: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      permissionList: {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: ''
      },
      rules: {
        name: [{ required: true, message: '请填写权限名称', trigger: 'blur' }, {
          trigger: 'blur',
          validator: async(rule, value, callback) => {
            const res = await getPermissionList()
            // 如果点击的是编辑就要把自己的那一条数据给过滤出来
            // if (!this.addIds.type) res = res.filter(item => item.name !== value)

            res.forEach(item => {
              if (item.name === value) {
                callback(new Error('该权限已经存在'))
              } else {
                callback()
              }
            })
          }
        }],
        code: [{ required: true, message: '请输入权限标识' }, {
          trigger: 'blur',
          validator: async(rule, value, callback) => {
            let res = await getPermissionList()
            if (!this.addIds.type)res = res.filter(item => item.code !== value)
            res.forEach(item => {
              if (item.code === value) {
                callback(new Error('权限标识已存在'))
              } else {
                callback()
              }
            })
          }
        }],
        description: [{ required: true, message: '请输入权限描述' }]
      }
    }
  },

  methods: {
    // 弹出层打开触发的函数
    async initialized() {
      if (this.addIds.type) {
        this.permissionList.type = this.addIds.type
        this.permissionList.pid = this.addIds.id
      } else {
        const res = await getPermission(this.addIds.id)
        this.permissionList = res
      }
    },
    // 关闭表单时触发的函数
    handleClose() {
      this.$emit('input', false)
      this.$refs.FormData.resetFields()
    },
    // 点击确认时触发
    addYes() {
      this.$refs.FormData.validate(async isOk => {
        if (isOk) {
          try {
            if (this.addIds.type) {
              await addPermission(this.permissionList)
              // 通知父组件更新
              this.$emit('uploadSuccess')
            } else {
              await updatePermission(this.permissionList)
              this.$emit('uploadSuccess')
            }
          } finally {
            this.handleClose()
          }
        }
      })
    }
  }
}
</script>

<style>

</style>
